<template>
  <div id="app">
    <div class="container">
      <img id="image" :src="picture">
      <!-- <img id="image2" :src="picture2"> -->
      <!-- <img id="image3" :src="picture3"> -->
      <!-- <img id="image4" :src="picture4"> -->
    </div>
    <div class="btn-group">
      <span class="rotatebtn" @click.passive="rotate()">旋转</span>
      <span class="getImgbtn" @click.passive="getImg()">获取图片</span>
    </div>
    <div class="preview-c">
      <div class="small"></div>
    </div>
    <div class="cavans"><img src="" alt=""></div>
    <div class="cavans2"><img src="" alt=""></div>
    <div class="orientImgCon"></div>
  </div>
</template>

<script>
import "@/assets/style/normalize.min.css";
import "@/assets/style/common.min.css";
import "@/assets/style/animate.min.css";
// import '@/assets/js/banshare.min.js'
// import '@/assets/js/tool.js'
import '@/assets/js/exif.js'


export default {
  name: "App",
  data() {
    return {
      picture: require('@/assets/img/bg.png'),
      picture2: require('@/assets/img/6.jpg'),
      picture3: require('@/assets/img/7.jpg'),
      picture4: require('@/assets/img/4.jpg'),
      w: 160,
      h: 90
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initImg();

    });
  },
  methods: {
    //获取图片的拍摄角度
    orientImg() {
      EXIF.getData(document.getElementById('image'), function () {
        console.log($('#image')[0]);
        var make = EXIF.getAllTags(document.getElementById('image')).Orientation;
      });
    },
    initImg() {
      var vm = this;
      var _this = $('#image');
      _this.cropper({
        aspectRatio: 16 / 9,//图片的宽高比
        scalable: false,//是否允许缩放图像。
        zoomOnTouch: false,//是否可以通过拖动触摸来放大图像。
        zoomable: false,//是否允许放大图像。
        cropBoxResizable: false,//是否通过拖动来调整剪裁框的大小。
        modal: false,//黑色模态框
        dragMode: 'none',//‘crop’: 可以产生一个新的裁剪框3 
        // ‘move’: 只可以移动3
        // ‘none’: 什么也不处理
        responsive: false,
        restore: false,
        autoCropArea: 0.8,
        checkOrientation: true,
        toggleDragModeOnDblclick: false,//点击两次时可以在“crop”和“move”之间切换拖拽模式
        viewMode: 1,//视图模式
        // 0：没有限制，3可以移动到2外。
        // 1: 3只能在2内移动。
        // 2：2图片 不全部铺满1 （即缩小时可以有一边出现空隙）
        // 3：2图片填充整个1
        preview: ".small",//预览容器
        crop: function (e) {
          // console.log(e);
        },
        ready: function () {
          vm.orientImg();
        },
        cropmove: function () {

        }
      });
    },
    rotate() {
      $('#image').cropper('rotate', 45);
    },
    getImg() {
      //**dataURL to blob**
      function dataURLtoBlob(dataurl) {
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
      }
      var canvas = $('#image').cropper('getCroppedCanvas');//获取当前截取的图片的大小
      var base64Url = canvas.toDataURL('image/jpeg')
      var base64Url_mini = canvas.toDataURL('image/jpeg', 0.5)
      console.log('before', dataURLtoBlob(base64Url));
      console.log('after', dataURLtoBlob(base64Url_mini));
      canvas.toBlob(function (e) {
        // console.log(e);  //生成Blob的图片格式
      })
      $('.cavans>img').attr('src', base64Url)  //在body显示出canvas元素
      $('.cavans2>img').attr('src', base64Url_mini) //在body显示出canvas元素
    }
  }
};
</script>
<style lang="less">
html {
  width: 100%;
  height: 100%;
}
body {
  margin: 0 auto;
  max-width: 750px; /*no*/
  width: 100%;
  height: 100%;
  .preview-c {
    position: fixed;
    top: 0;
    width: 100%;
    .small {
      margin: 0 auto;
      overflow: hidden;
      width: 480px;
      height: 270px;
    }
  }
  .container {
    width: 100%;
  }
  .btn-group {
    position: fixed;
    bottom: 20px;
    width: 100%;
    span {
      width: 25%;
      padding: 10px;
    }
    span:first-child {
      width: 50px;
      background: #e4393c;
      z-index: 999;
    }
    span:nth-child(2) {
      width: 50px;
      background: green;
      z-index: 999;
    }
    span:nth-child(3) {
      width: 50px;
      background: blue;
      z-index: 999;
    }
  }
}
</style>


